<template>
  <edit-dialog :centerDialogVisible="visible" :tilte="title" width="600" @Cancel="handleCancel" :defaultButton="false">
    <template #content>
      <el-form :model="form" ref="applyApproveFormRef" class="upload-approve-form" label-suffix="：" label-width="auto">
        <el-form-item label="延期至" prop="projectSchedule.latestTime">
          <span>{{form.projectSchedule.latestTime}}</span>
        </el-form-item>
        <el-form-item label="延期原因" prop="projectSchedule.deferReason">
          <div style="width: 400px;white-space: normal;overflow-wrap: break-word;">{{form.projectSchedule.deferReason}}</div>
        </el-form-item>
        <el-form-item v-if="form.isReject" label="审批意见">
          <el-input v-model="form.examineOpinion"  maxlength="200" show-word-limit/>
        </el-form-item>
      </el-form>
    </template>
    <template #custom>
      <template v-if="form.isReject">
        <el-button @click="closeRejectReason">取消</el-button>
        <el-button type="danger" @click="handleReject" :disabled="rejectLoading">驳回</el-button>
      </template>
      <template v-else>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="danger" @click="showRejectReason">驳回</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="loading">同意</el-button>
      </template>
    </template>
  </edit-dialog>
</template>

<script>
import EditDialog from "@/components/editDialog/index.vue";
import ApplyApproveUploadFile from "@/views/construction/project-application/review-components/ApplyApproveUploadFile";
import {ApplyApproveType} from "@/views/construction/project-application/projectUtil";
import {approveBeforeProjectStart, reviewApplyDelay} from "@/api/construction-project/projectManage";
import store from "@/store";

export default {
  name: "ReviewDelayDialog",
  components: {ApplyApproveUploadFile, EditDialog},
  props: {
    options: {
      type: Object,
      default: () => ({})
    }
  },
  inject: ["options"],
  data() {
    return {
      visible: false,
      form: {
        type: Object,
        default: () => ({
          exeContent: {
            files: [],
            formContent: {}
          },
        })
      },
      title: '审批延期',
      formType: undefined,
      ApplyApproveType,
      rejectLoading: false,
      loading:false
    }
  },
  computed: {
    userInfo() {
      return store.state.user.userInfo
    },
  },
  methods: {
    open({row, title, formType, resolve}) {
      this.resolve = resolve
      this.visible = true
      this.title = '审批延期申请'
      this.form = {
        status: 1,
        approver: {
          id: this.userInfo.userId,
          name: this.userInfo.name,
          organId: this.userInfo.organId,
          organName: this.userInfo.organName,
        },
        projectId: row.id,
        change: row.change,
        projectSchedule: row.projectSchedule || {}
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleSubmit() {
      let that = this
      this.$refs.applyApproveFormRef.validate(valid => {
        if (valid) {
          this.loading = true
          let {exeContent, ...more} = that.form
          reviewApplyDelay(more).then(res => {
            that.$message.success("操作成功")
            that.resolve()
            that.visible = false
          }).finally(()=>{
            this.loading = false
          })
        }
      })
    },
    showRejectReason() {
      this.form.status = 0
      this.form.isReject=true
    },
    closeRejectReason() {
      this.form.status = 1
      this.form.isReject = false
    },
    handleReject() {
      this.$refs.applyApproveFormRef.validate(valid => {
        if (valid) {
          this.rejectLoading = true
          reviewApplyDelay(this.form).then(res => {
            this.visible = false
          }).finally(()=>{
            this.rejectLoading = false
          })
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.upload-approve-form {
  padding: 0 20px;

}
</style>
